First of all a huge THANK YOU for purchasing my WordPress Theme at Themeforest. If you have any questions that are beyond the scope of this help file, please join our Support Forums. If you’d like to start a new thread over there I’ll get any issues you’re experiencing sorted out. You can also follow me on Themeforest to keep track of all my theme updates and future themes. Thanks so much!
Contact: Envirra
Have a problem with theme?
In order to proceed with the theme installation, you must be running WordPress 3.8 or higher, PHP 5.3 or higher.
Navigate to your downloads tab on Themeforest and find Sprout. Click the download button to see the two options. The Main Files contain everything (including documentation) and the Installable WordPress Theme is just the installable WordPress theme file. Please download the Installable WordPress Theme file for installation.
Appearance → Themes
.Install Themes
and hit the upload
buttonsprout.zip
file on your computer and click Install Now
Appearance → Themes
and activate it.Begin install plugins
to install and activate the required plugins.
press.zip
file and ONLY use the extracted Sprout theme folder.wp-content → themes
folder.Appearance → Themes
and activate it.If you are migration from a theme which used the native featured images functionality of WordPress. Please use the Regenerate Thumbnails plugin to resize all the thumbnails for better image quality on your site. Click the link above and download the free plugin, and read through the steps it contains, it has all the information you need.
You can update your theme via FTP or via WordPress. See the information below for each method. No matter what method you choose, you first need to download the new theme files from Themeforest.
/wp-content/themes
location and backup your sprout
theme folder by saving it to your computer, or you can choose to simply delete it. Your content will not be lost.sprout.zip
file from your new Themeforest download (only theme file) and extract the file to get the sprout
theme folder./wp-content/themes
location. Choose to Replace
the current one if you did not delete it.Appearance → Themes
section by simply activating a different theme. Once you activate a different theme, you can delete the Sprout theme. Dont worry, your content will not be lost.sprout.zip
file from your new Themeforest download (only theme file) and extract the file to get the sprout
theme folder.sprout.zip
file in the Appearance → Themes
section. Click on the Install Themes
tab at the top and choose to upload the zip file.We recommend you to install these plugins to get more from the theme.
Other plugins we recommend to you to install (optional):
The theme comes with a .xml file containing demo content you can import into your WordPress site. This will help you get started, in case you are running on a fresh WP installation with no content at all.
1-Click Demo Content Installation
Theme Options
.Import Demo
button to start import. Please be patience as it will take quite some time. Do not interrupt it.Sprout Shortcodes
plugin. The homepage of demo content is required this plugin.
How to Import Demo Content by Manual
Tools → Import
.WordPress
link (if the Importer plugin is not installed, install it now).demo-content.xml
file located in the archive which you have downloaded from ThemeForest (from the All files archive) and click "Upload file and import" button.Appearance → Menus → Manage Locations
. Select Main Menu
as Sample Main Menu
.Pages → Add New
.Publish
.After selecting the VW Simple Page Composer
template (at Page Template
dropdown) you will see the Page Composer interface which easily lets you create the homepage layout. To get started click on the Add Section
button and you will see all the available sections you can add to your homepage.
Please import demo content before try these examples.
Page Template: VW Simple Page Composer
, Show Page Title: No
.
3
, Category: All
, Posts Order: Latest Featured Posts
6
, Category: All
, Posts Order: Latest Posts
, Layout: Masonry grid - 2 columns
, Pagination: Show
Sample Full Link Page
or any page that has a featured image.5
, Category: All
, Posts Order: Latest Reviews
, Layout: Carousel
, Pagination: Hide
Page Template: VW Simple Page Composer
, Show Page Title: No
.
3
, Category: All
, Posts Order: Most Review Scores
3
, Category: All
, Posts Order: Most Review Scores
, Layout: Box grid - columns
, Pagination: Hide
4
, Category: All
, Posts Order: Latest Posts
, Layout: Classic
, Pagination: Show
Sample Full Link Page
or any page that has a featured image.Now you have to tell WordPress wich page is your site homepage.
Settings → Reading
. Front Page Displays
option, select A static page
.Front page:
option, select your home page. In case of the demo content is already imported, Choose any of these pages Sample Home 1
, Sample Home 2
, Sample Home 3
for a sample of homepage.Setting up categories for this theme is no different than ordinary category setup in WordPress, however, we provide some additional layout settings.
Go to Posts → Categories
and fill in the info required. You will see an extra options as follows:
Site Default
value at Theme Options → Blog → Default Blog Layout
Custom
option, You need to create a custom layout. More details on topic Advanced Customization (The custom option is for advanced user who have a knowledge in coding).Adding a new post is the same way as default WordPress installations (just navigate to Posts → Add New
), however, there are extra options that might need explaining.
You will see the following post options when adding a post.
Site Default
value at Theme Options → Blog → Default Post Layout
Custom
option, You need to create a custom layout. More details on topic Advanced Customization (The custom option is for advanced user who have a knowledge in coding).Also, You will see a sidebar options on the right of screen.
Default
value at Theme Options → Blog → Default Sidebar Position
While the theme can function without featured images, it's highly recommended that you add a featured image to each post. This not only makes your site/blog more lively but also improves user experience.
To set the featured image, use the WordPress normal method. Click Set featured image
link in the Featured Image
box and choose the image.
Image size (dimensions) will depend on what type of layout you're using throughout your WordPress installation or per individual post basis. This image will not only be used on the post, but also on the category listing pages.
You can insert a credit for a featured image by enter a credit message into a Caption
field of image when you're selecting the image from Media Library.
We enabled four WordPress native post formats. Each format has it's own custom fields (except Standard) for simple content making.
Setup your post normally and set a featured image. There are 2 methods for embeding video in a post.
Video Source
.Featured Video Code
box.WordPress supports embedding into posts by default. An audio player will be inserted into the post.
Add Media
button.If you need to embed the external audio, There are 2 methods for embeding audio in a post.
Sound Cloud Audio Source
.Featured Audio Code
box.Setup your post normally and set a featured image. Next, Click Select or Upload Images
button in the Gallery Post Options
box and choose your images. You can re-arrange the order of image by dragging. The selected images will be displayed as image slider.
To insert a tiled gallery, Follow this steps:
Add Media
button just the above the editor. A media window will open.Create Gallery
. Upload images or select from Media Library. Click Create a new gallery
.Insert gallery
.Theme Options → Blog → Custom Tiled Gallery → Tiled Gallery Layout
.Theme Options → Blog → Custom Tiled Gallery → Enable Custom Tiled Gallery
.You can add a review and score fetures to any post. To enable this feature locate the "Review Option" meta box under the editor and click the "Enable Review" checkbox.
After the additional fields are open you can start creating your review.
Custom
position, You need to insert shortcode [review]
into post content.Creating pages is a simple process. Please follow this steps:
Pages → Add New
.(optional) Locate Page Options
meta box on the page. The page options are the follows
Set featured image
and choose the background image.Appearance → Menus
and click Add Menu.Manage Locations
tab, select the menu for each location.Save changes
button.Follow the next steps to define menus for each of the theme's menu locations. In each menu, you can add as many items you need.
Appearance → Menus
and click Add Menu.Menu name
text box.Menu Settings
area, at the bottom, select the theme location for display this menu. Multiple theme location can be selected.Save Menu
button.Them theme comes with mega menu for Main menu. You can show the menu items with posts or show links in multiple columns.
Appearance → Menus
and select your menu.Mega Menu Type
, select Category Mega Menu
or 4 Columns Links Mega Menu
.To make mega-menus work, you have one additional step of adding sub-items.
For Category Mega Menu
, add a few sub-categories as sub-items (drag/drop them under a parent category in menu). Example:
For 4 Columns Links Mega Menu
, This can be configured by adding Custom Links to be used as headings. You can use 4 of these headings. Then, a 3rd-level sub-items are added which are displayed as links, under each heading. Example:
To enable sticky navigation for main menu, Navigate to Theme Options → Site
and turn on the option Enable Sticky Menu
. Click Save Changes
.
To make your author avatar to appear on your site, register at gravatar.com with the same email you registered at your wordpress site. Otherwise, You can install the Simple Local Avatars plugin to upload the avatar image directly to your site.
We added some extra fields to the user profile page to extend the information about the authors of your site. The added fields are: Social Profiles and a Custom Avatar upload instead of the default WP gravatar.
To add a new author and information that will be visible on the front, follow this steps:
Users → Add New
Author
in Role
dropdown and select desired name in Display name publicly as
dropdownThe Theme Options Panel helps you easily take control over your site, by allowing you to upload your logo and favicon, style the appearance of the theme with your custom colors, change fonts, turn features on and off, paste custom CSS and JS code, paste the Analytcs code without having to write any code.
To access the Theme Options panel, navigate to Theme Options
.
After you create a set of settings, you might want to save your work. This is useful if you want to experiment with the options while keeping the old settings in case you need them again.
Navigate to the Theme Options → Import / Export
tab and click the Download
button. Once the download is finished, you will be able to restore your options by clicking the Import from file
button, paste the data of downloaded file, and clicking the Import
button.
You can tranfer the saved options data between different installs by clicking the Copy
button and copying the text inside the text box. To import data from another install, click the Import from file
button and paste the data in the text box with the one from another install and click Import
.
The theme comes with 5 sidebars areas which you can use above sidebars for quick start building your site
If you need to create a custom sidebar, Please navigate to Appearence → Sidebars
and click Add new sidebar
.
The theme comes with 9 custom widgets:
We have created a very nice and lightweight shortcode generator with very understandable and intuitive interface.
After installing the Sprout Shortcodes plugin, navigate to any page or post where you want to add the shortcode. You will see a new button [sc]
was added to the editor. Click on the button and you'll see the dropdown with all available shortcodes.
To start generating the shortcodes, make sure your mouse cursor is blinking inside the editor and click on one of the shortcode name. For some shortcodes, The shortcode will be inserted immediately. But for some shortcodes, The shortcode options will be shown. You can set the shortcode options and click Insert Shortcode
.
If you wish to manually use the shortcodes (advanced users only), the guide below offers some insight into each.
Show the number 404 for 404 page.
[404]
[accordions] [accordion title='Title Here']Content Here[/accordion] [accordion title='Title Here']Content Here[/accordion] [/accordions]
The [accordion]
shortcode has the following options:
icon-
, Example elusive-right-open
. The full icon listing is at Theme Options → Font Icons
true
, false
. The default is false
.[author title="Editor"]
The [author]
shortcode has the following options:
[button style='red' icon='iconic-umbrella']Button Name[/button]
The [button]
shortcode has the following options:
primary
, black
, orange
, red
, yellow
, blue
, green
, purple
, pink
icon-
, Example elusive-right-open
. The full icon listing is at Theme Options → Font Icons
_blank
for open link in new window.true
, false
. The default is false
.[row] [column size='1/2']Your Content Here[/column] [column size='1/2']Your Content Here[/column] [/row]
The [column]
has the following options:
1/1
, 1/2
, 1/3
, 2/3
, 1/4
, 3/4
, 1/5
, 2/5
, 3/5
.This shortcode is to apply the custom font in the content. Please upload a font file at Theme Options > Custom Fonts
before using this shortcode.
[customfont1]Text[/customfont1] [customfont2]Text[/customfont2]
[dropcap style='standard']A[/dropcap]
The [dropcap]
shortcode has the following options:
standard
, circle
, box
.[em]Text Here[/em]
You can also use this shortcode in widget title.
[gap]
The [gap]
shortcode has the following options:
30
.[infobox title='Title Here']Content Here[/infobox]
[list] [list_item icon="iconic-right-circle"]Content Here[/list_item] [/list]
The [list]
shortcode has the following options:
icon-
, Example elusive-right-open
. The full icon listing is at Theme Options → Font Icons
.Show the site logo that uploaded at Theme Options → Logo/Favicon
[logo width='']
The [logo]
shortcode has the following options:
Hilight the text.
[mark style='yellow']Marked Text Here[/mark]
The [mark]
shortcode has the following options:
yellow
, grey
, dark
.[posts title='Title Here']
The [posts]
shortcode has the following options:
,
(comma).,
(comma).video
, audio
, gallery
.classic
, slider-carousel
, box-grid-3-col
, block-grid-2-col
, block-grid-3-col
, masonry-grid-2-col
, masonry-grid-3-col
, custom-1
, custom-2
, custom-3
, custom-4
.latest
, random
, featured
, latest_gallery
, latest_video
, latest_audio
, latest_reviews
, most_viewed
, most_review_score
, .ASC
, DESC
.[pricing_table] [pricing_item title='Basic' price='50' currency='$' per='/mo.' button='BUY' link='http://themeforest.net/user/envirra/portfolio?ref=envirra' featured=''] An item details [/pricing_item] [pricing_item title='Professional' price='150' currency='$' per='/mo.' button='BUY' link='http://themeforest.net/user/envirra/portfolio?ref=envirra' featured='true'] An item details [/pricing_item] [pricing_item title='Unlimited' price='200' currency='$' per='/mo.' button='BUY' link='http://themeforest.net/user/envirra/portfolio?ref=envirra' featured=''] An item details [/pricing_item] [/pricing_table]
The [pricing_item]
shortcode has the following options:
true
to mark this item as featured.[quote]Content Here[/quote]
[tabs] [tab title="Responsive" icon="iconic-doc"]CONTENT HERE[/tab] [/tabs]
The [tab]
shortcode has the following options:
icon-
, Example elusive-right-open
. The full icon listing is at Theme Options → Font Icons
.There are two ways to customize the theme without changing it's core files.
Please navigate to Theme Options → Custom JS/CSS
and insert your own CSS and JS here.
The theme comes with it's Child Theme. If you want more complex cutomization of the parent theme and change the files, layout, html, objects order this way is even better. To start using child follow this steps:
Appearence → Themes
Upload
sprout-child.zip
inside the /Theme Files
folder which you have downloaded from ThemeForest and double click on that file.Install Now
button and after the theme is installed, Activate itThat is it, now the child theme is ready. You can open the /sprout-child/style.css
file and write your CSS there. It will override the default the CSS from the parent theme. You can also copy any file from the parent theme, put it inside the child them and make the changes.
We prepared a custom layout option for displaying a posts on category page and blog page. We call it the "Post Box". Adding a custom blog layout is very easy, Just edit or override these template files from child theme:
/sprout/templates/post-loop/loop-custom-1.php
/sprout/templates/post-loop/loop-custom-2.php
/sprout/templates/post-loop/loop-custom-3.php
/sprout/templates/post-loop/loop-custom-4.php
You can create a custom post layout in the same way as adding a custom blog layout. The template files as follows:
/sprout/single_custom_1.php
/sprout/single_custom_2.php
You can create a custom site top bar or site bottom bar in the same way as adding a custom blog layout. The template files as follows:
/sprout/templates/top-bar-custom-1.php
/sprout/templates/top-bar-custom-2.php
/sprout/templates/bottom-bar-custom-1.php
/sprout/templates/bottom-bar-custom-2.php
This section will give you an information for playing with the code of theme.
vw_action_
vw_filter_
VW_CONST_
. Some constant can be used for configuration but some constant is just a toggle for disable some part./sprout/templates/*
. You can copy file from the parent theme and placed in the child theme at the same folder structure./sprout-child/functions.php
This theme is fully translation ready! The translation files .po/.mo are located in /sprout/languages
in the Themes folder. We've included English Translation right away.
To translate the theme, just follow these steps:
en_EN.po
file and rename it to your language (for German it's de_DE.po
)wp-config.php
file your language is defined like this: define('WPLANG', 'de_DE');
de_DE
to you language and country code.
To rename different Words, like "Read More", "Comments" etc, just follow these steps:
en_EN.po
file using POEdit (http://www.poedit.net/)wp-config.php
file your language is defined like this: define('WPLANG', 'en_EN');
Instead of using POEdit, You can use the localization plugin like Codestyling Localization.
After translating, you may wish to use the correct locale to translate and localize your WordPress installation completely. Refer to Installing WordPress In Your Language at WordPress Codex to learn how to.
For languages that read from right-to-left unlike English which is left-to-right, Sprout will automatically switch to an RTL style, as long as you it's in your language and uses the correct locale (as explained above).
When you've found the problem with theme, Please try the following steps for a basic troubleshooting:
These images are not included in the demo file.